@use 'sass:map';
@use 'node_modules/@angular/material' as mat;

@use '../../../scss/gio-material-theme' as gio;
@use '../../../scss/gio-palettes' as gio-palettes;

$typography: map.get(gio.$gio-theme, typography);

.save-bar-sticky {
  position: sticky;
  bottom: 0;
  margin-left: -16px;
  margin-right: -16px;
}

.save-bar {
  margin-top: 32px;
  height: 50px;
  z-index: 1000;

  &__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 32px;
    height: 100%;

    &__label {
      @include mat.typography-level($typography, body-2);
    }

    &__reset-button {
      margin-right: 16px;
    }

    &__submit-button {
      background-color: mat.get-color-from-palette(gio-palettes.$gio-success-palette, 'medium');

      &:hover:enabled {
        background-color: mat.get-color-from-palette(gio-palettes.$gio-success-palette, 'dark');
      }

      &.invalid {
        background-color: mat.get-color-from-palette(gio-palettes.$gio-success-palette, 'light');

        &:hover:enabled {
          background-color: mat.get-color-from-palette(gio-palettes.$gio-success-palette, 'medium');
        }
      }
    }
  }
}
